<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法事件处理器</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
    <div id="app_on">
        <p>直接绑定事件处理方法</p>
        <button @click="greet">Click</button>

        <p>使用内联的方式绑定</p>
        <button @click="sayHi('hi')">SayHi</button>
        <button @click="sayHello('hello')">SayHello</button>

    </div>

    <script>
        var app_on = new Vue({
            el:'#app_on',
            data:{
                msg:'Hello Vue.js !',
            },
            methods:{
                greet:function (event) {
                    alert("Vue实例中的数据msg为："+this.msg);
                    if (event){
                        var name = event.target.tagName ;
                        alert(name);
                    }
                },
                sayHi:function (message) {
                    alert(message);
                },
                sayHello:function (message,$event) {
                    // 现在我们可以访问原生事件对象
                    if (event) event.preventDefault()
                    alert(message)
                }
            }
        })

    </script>
</body>
</html>